<template>
  <div class="mx-auto w-4/5 py-4" id="container">
    <!-- 第一行卡片 -->
    <a-row class="flex justify-between mb-16" :gutter="10" id="row-1">
      <a-col v-for="i in 18" :key="i" class="w-[11%]" :id="`card-col-${i}`">
        <a-card :id="`card-${i}`" class="flex flex-col justify-between mb-3">
          <a-image :id="`card-image-${i}`" class="w-full mb-1" src="https://picsum.photos/id/1/333/156" />
          <a-typography-paragraph :id="`card-text-${i}`" class="text-center">你好</a-typography-paragraph>
        </a-card>
      </a-col>
    </a-row>

    <!-- 中间卡片 -->
    <a-card class="mb-8" id="middle-card">
      <div class="flex justify-between items-center p-1.5" id="middle-card-content">
        <div id="middle-card-text">你好你好你好你好</div>
        <div class="flex gap-2 text-2xl" id="middle-card-icons">
          <UpSquareOutlined id="middle-card-icon-up" />
          <DownSquareOutlined id="middle-card-icon-down" />
        </div>
      </div>
    </a-card>

    <!-- 底部卡片 -->
    <a-row :gutter="10" id="row-2">
      <a-col class="w-[80%]" id="bottom-left-col">
        <a-row :gutter="11" id="row-2-inner">
          <a-col :span="6" v-for="i in 10" :key="i" :id="`bottom-card-col-${i}`">
            <a-card class="flex flex-col justify-between mb-3" :id="`bottom-card-${i}`">
              <a-typography-paragraph
                class="box-border p-2.5 border-solid border-x-0 border-t-0 border-b border-gray-100 pb-2 mb-2"
                :id="`bottom-card-content-${i}`"
              >
                <a-image :id="`bottom-card-image-${i}`" class="w-full mb-1" src="https://picsum.photos/id/1/333/222" />
                <a-typography-paragraph :id="`bottom-card-text-1-${i}`">你好</a-typography-paragraph>
                <a-typography-paragraph :id="`bottom-card-text-2-${i}`"
                  >产品信息产品信息产品信息产品信息产品信息产品信息</a-typography-paragraph
                >
                <UpSquareOutlined :id="`bottom-card-icon-up-${i}`" />
                <DownSquareOutlined :id="`bottom-card-icon-down-${i}`" />
              </a-typography-paragraph>
              <a-typography-paragraph class="p-2.5" :id="`bottom-card-footer-${i}`">
                <a-typography-paragraph :id="`bottom-card-footer-brand-${i}`">品牌：你好</a-typography-paragraph>
                <a-typography-paragraph :id="`bottom-card-footer-category-${i}`">分类：你好</a-typography-paragraph>
              </a-typography-paragraph>
            </a-card>
          </a-col>
        </a-row>
      </a-col>
      <a-col class="w-[20%]" id="bottom-right-col">
        <a-card v-for="i in 4" :key="i" class="flex flex-col justify-between mb-3" :id="`right-card-${i}`">
          <a-image :id="`right-card-image-${i}`" class="w-full mb-1" src="https://picsum.photos/id/1/444/280" />
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script setup>
  // 脚本部分保持不变
</script>
